<template>
    <div class="mycity" ref="mycity">
        <div class="searchbox">
            <!-- @input可以监听键盘输入内容 -->
            <input @input="search_city" v-model="city_keyword" @click="search_mode = true" type="text"
                placeholder="输入城市名或拼音">
            <span @click="search_mode = false" v-show="search_mode" class="cancel">取消</span>
        </div>
        <!-- 常规页面展示的页面，搜索打开后就不显示 -->
        <div v-show="!search_mode">
            <div class="hotcity">
                <p>热门城市</p>
                <div class="hots">
                    <ul>
                        <li v-for="hot in hotcities" :key="hot.cityId">
                            <span> {{ hot.name }} </span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="allcity">
                <div class="group" v-for="item in cities" :key="item.keyword">
                    <h1 class="keyword">{{ item.keyword }}</h1>
                    <ul>
                        <li @click="jumpurl(city)" v-for="city in item.children" :key="city.cityId">{{ city.name }}</li>
                    </ul>
                </div>
            </div>
            <!-- 导航栏 -->
            <div class="keywords">
                <ul>
                    <li @click="jumptokeyword(index)" v-for="(item, index) in group" :key="item">{{ item }}</li>
                </ul>
            </div>
        </div>
        <div v-show="search_mode" class="search_result">
            <p v-show="search_result.length == 0" class="empty">暂无搜索结果</p>
            <ul>
                <li @click="jumpurl(city)" v-for="city in search_result" :key="city.cityId">{{ city.name }}</li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        cities: {
            type: Array,
            required: true
        },
        hotcities: {
            type: Array,
            required: true
        },
        group: {
            type: Array,
            required: true
        },
        // 用来搜索的城市数据
        allcities: {
            type: Array,
            required: true
        }
    },
    data() {
        return {
            search_mode: false,
            city_keyword: '',
            search_result: []
        }
    },
    methods: {
        // 搜索城市的方法
        search_city() {
            if (this.city_keyword) this.search_result = this.allcities.filter(city => city.name.indexOf(this.city_keyword) !== -1 || city.pinyin.indexOf(this.city_keyword) !== -1)
            else this.search_result = [];
        },
        jumpurl(_city) {
            this.$store.commit('change_city',_city)
            this.$router.push('/nowplaying')
        },
        jumptokeyword(_index) {
            // 拿到所有字母的下标
            let h1s = this.$refs.mycity.getElementsByClassName('keyword');

            h1s[_index].scrollIntoView({
                behavior: 'smooth',// 平滑滚动
                block: 'start'
            })
        }
    },
    created() {
    },
}
</script>

<style lang="less" scoped>
@import url(@/assets/Less/common.less);

.city {
    .searchbox {
        height: 50px;
        background-color: @f4_color;
        .flex();
        box-sizing: border-box;
        padding: 0 15px;

        input {
            line-height: 30px;
            border: 0;
            width: 100%;

            box-sizing: border-box;
            padding-left: 15px;
        }

        .cancel {
            display: inline-block;
            font-size: 14px;
            width: 45px;
            text-align: center;
        }

    }

    .hotcity {
        padding: 10px;

        p {
            font-size: @normal_font_size;
            color: @gray_text_color;
            margin-bottom: 10px;
        }

        ul {
            overflow: hidden;

            li {
                .flex();
                list-style: none;
                float: left;
                width: 33.33%;
                margin: 5px 0;

                span {
                    display: inline-block;
                    width: 92%;
                    text-align: center;
                    padding: 5px 0;
                    background-color: @f4_color;
                }
            }
        }
    }

    .allcity {
        h1 {
            background-color: @f4_color;
            font-size: @mini_font_size;
            padding: 5px 0 5px 10px;
            font-weight: normal;
        }

        ul {
            li {
                font-size: 14px;
                color: @text_color;
                border-bottom: 1px solid @border_color;
                padding: 10px 0 10px 15px;
            }
        }
    }

    .keywords {
        .position(fixed, 150px, auto, auto, 5px);
        font-size: @mini_font_size;
        text-align: center;

        ul {
            li {
                list-style: none;
                margin: 5px 0;
            }
        }
    }

    .search_result {
        ul {
            li {
                font-size: 14px;
                color: @text_color;
                border-bottom: 1px solid @border_color;
                padding: 10px 0 10px 15px;
            }
        }

        .empty {
            height: 100px;
            .flex();
        }
    }
}
</style>